<template>
	<view class="home">
		<!-- 搜索区域 -->
		<view class="content">
			<view class="search">
				<image src="../../static/font/search.png" mode=""></image>
				<input type="text" placeholder="看看有什么好东西">
				<image src="../../static/font/kf.png" mode="" class="kf"></image>
			</view>
		</view>
		
		<!-- 导航区域 -->
		<view class="nav">
			<van-sidebar v-model="activeKey" @change="onChange">
			  <van-sidebar-item v-for="item in navList" :key="item.id" :title="item.name"/>
			 <!-- <van-sidebar-item title="顶级纯原热门鞋款" />
			  <van-sidebar-item title="周边潮玩" />
			  <van-sidebar-item title="自主椰子" />
			  <van-sidebar-item title="自主运动" />
			  <van-sidebar-item title="自主帆布鞋" />
			  <van-sidebar-item title="自主板鞋" />
			  <van-sidebar-item title="自主新百伦" />
			  <van-sidebar-item title="自主老爹鞋" />
			  <van-sidebar-item title="凉鞋童鞋" />
			  <van-sidebar-item title="人工客服" /> -->
			</van-sidebar>
		</view>
		
		<!-- 轮播图区域 -->
		<view class="sw" >
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" ref="swp">
			  <van-swipe-item v-for="item in banner" :key="item.id">
				  <img :src="item.imgUrl" alt="" class="img">
			  </van-swipe-item>
			  <!-- <van-swipe-item>4</van-swipe-item> -->
			</van-swipe>
		</view>
		
		<!-- 展示区域 -->
		<view class="demo">
			<text class="tx">{{logicTitle}}</text>
			<view class="item" v-for="(item,index) in logic" :key="item.id" @click="tocategory(item.id,item.name)">
				<image :src="item.imgUrl" mode=""></image>
				<text>{{item.name}}</text>
			</view>
			<!-- <view class="item">
				<image src="../../static/yz700.png"></image>
				<text>乔丹</text>
			</view>
			<view class="item">
				<image src="../../static/yezhi.jpg" mode=""></image>
				<text>耐克Nike</text>
			</view>
			<view class="item">
				<image src="../../static/nike_log.png" mode=""></image>
				<text>耐克Nike</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {getNavList,getBanners,getLogic} from '../../request/api.js'
	
	export default {
		data() {
			return {
				title: 'Hello123',
				activeKey:0,
				navList:[],
				banner:[],
				logic:[],
				logicTitle:''
			}
		},
		onLoad() {
			this.getNav()
			this.getBanner()
			this.getLogIc()
		},
		methods: {
			// 获取侧边栏数据
			getNav(){
				getNavList((res)=>{
					this.navList = res
				})
			},
			// 获取轮播图数据
			getBanner(){
				getBanners((res)=>{
					this.banner =res	
				})
			},
			//获取图标
			getLogIc(index=0){
				// getLogic().then(res=>{
				// 	this.logic = res[index]
				// 	// console.log(this.logic);
				// })
				// console.log(index);
				
				getLogic(index+1,(res)=>{
					console.log(res);
					this.logic = res
					this.logicTitle = res[0].fnane
				})
			},
			onChange(e){
				this.getLogIc(e)
			},
			tocategory(id,name){
				uni.navigateTo({
					url:'/pages/category/category?id='+id+'&name='+name,
					animationType:"slide-in-right",
					animationDuration:300
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f3f3f3;
	}
	.home{
		position: relative;
		background-color: #f3f3f3;
		width: 100%;
		height: 89vh;
	}
	.content {
		margin-top: 10rpx;
		position: relative;
		display: flex;
		/* flex-direction: column; */
		align-items: center;
		justify-content: center;
	}
	.content .search>image{
		position: absolute;
		width: 24px;
		height: 24px;
		left: 20px;
	}
	.content .search .kf{
		top: 10px;
		left: 91%;
	}
	.search{
		width: 95%;
		height: 40px;
		box-sizing: border-box;
		padding-top: 7px;
		text-indent: 40px;
		background-color: white;
	}
	.nav{
		margin-top: 10px;
		.van-sidebar-item{
			padding: 12px 8px;
		}
		.van-sidebar-item--select{
			color: #085710;
		}
	}
	.nav .van-sidebar-item--select::before{
		height: 60px;
		background: #085710;
	}
	.demo{
		position: absolute;
		top: 220px;
		right: 10px;
		width: 75%;
		box-sizing: border-box;
		padding: 23px 13px;
		min-height: 300px;
		background: white;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		.tx{
			position: absolute;
			top: 3px;
			color: #085710;
			font-size: 13px;
		}
		.item{
			width: 70px;
			height: 80px;
			margin: 0 8px;
			display: flex;
			cursor:pointer;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 50px;
				height: 50px;
			}
			text{
				font-size: 13px;
			}
		}
	}
	.sw{
		position: absolute;
		top: 60px;
		right: 10px;
		width: 75%;
	}
	.my-swipe{
		border-radius: 10px;
	}
	
	// 轮播图样式
	.my-swipe .van-swipe-item {
	    color: #fff;
	    font-size: 20px;
	    line-height: 150px;
	    text-align: center;
		height: 150px;
	    background-color: #39a9ed;
		
	  }
	  .img{
		  width: 100%;
		  height: 150px;
	  }
</style>
